<template>
	<div class="yunui-slider-bar">
		<ul class='yunui-slider-bar-ul'>
			<li :class="[item.selected===true?'selected':'']" v-for="(item,index) in itemList" :key="index" @click="onItemClickHandler(index)">
				<img :src="item.icon" style="width: 24px;height: 24px;"/>
				<div class='yunui-slider-bar-text'>{{item.name}}</div>
				<div class='yunui-slider-bar-indicator' v-show="item.selected"></div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'MainSliderBar',
		props:["itemList"],
		data() {
			return {
				currentItemList:this.itemList
			}
		},methods: {
			onItemClickHandler(index) {
				this.currentItemList=this.itemList;
				for(var i=0;i<this.itemList.length;i++){
					if(i==index){
						this.currentItemList[i]["selected"]=true;
					}else{
						this.currentItemList[i]["selected"]=false;
					}
				}
				this.$emit("itemClick",index);
			}
		}
	}
</script>

<style>
	
</style>
